<template>
  <div>
    <CloudSteps v-model="current" :steps="steps"></CloudSteps>
    <br />
    <br />
    <br />
    <CloudSteps :current="current1" @change="onChange1">
      <CloudStep title="已提交订单" description="2021-01-02 20:00:12" />
      <CloudStep title="待商务确认" description="2021-01-02 20:00:12" />
      <CloudStep title="待认证" />
      <CloudStep title="交易完成" />
    </CloudSteps>
    <br />
    <br />
    <br />
    <CloudSteps :current="current2" @change="onChange2">
      <CloudStep title="已提交订单" description="2021-01-02 20:00:12" />
      <CloudStep title="待商务确认" description="2021-01-02 20:00:12" />
      <CloudStep title="待认证" description="2021-01-02 20:00:12" />
      <CloudStep title="交易完成" />
    </CloudSteps>
    <br />
    <br />
    <CloudSteps :current="current3" @change="onChange3">
      <CloudStep title="已提交订单" description="2021-01-02 20:00:12" />
      <CloudStep title="待商务确认" description="2021-01-02 20:00:12" />
      <CloudStep title="待认证" description="2021-01-02 20:00:12" />
      <CloudStep title="交易完成" description="2021-01-02 20:00:12" />
    </CloudSteps>
  </div>
</template>

<script>
export default {
  title: '1.基本使用',
  data() {
    return {
      current: 1,
      current1: 2,
      current2: 3,
      current3: 4,
      steps: [
        {
          title: 'step111',
          status: '',
          subTitle: 'subTitle111',
          disabled: false
        },
        {
          title: 'step222',
          status: '',
          subTitle: 'subTitle222',
          disabled: false
        },
        {
          title: 'step333',
          status: '',
          subTitle: 'subTitle333',
          disabled: false
        },
        {
          title: 'step444',
          status: '',
          subTitle: 'subTitle444',
          disabled: false
        }
      ]
    }
  },
  methods: {
    onChange1(current) {
      this.current1 = current;
    },
    onChange2(current) {
      this.current2 = current;
    },
    onChange3(current) {
      this.current3 = current;
    }
  }
}
</script>

<style lang="scss">
</style>